import SUN from 'src/assets/js/SUN'
import cityData from './citys'

let AT = {
	defaultRadius: 13,
	defaultColor: '#edc966',
	init(el){
		AT.Stage = new SUN.Stage(el)

		// 获取城市数据
		AT.cityData = cityData

		AT.flow(AT.Stage.stageWidth, AT.Stage.stageHeight)

		
		AT.centerX = AT.calcW(605)
		AT.centerY = AT.calcH(430)


		// 初始化数据中心点
		for(let i = 0; i < AT.cityData.length; i ++){
			AT.cityData[i].moveX = AT.centerX
			AT.cityData[i].moveY = AT.centerY,
			AT.cityData[i].pos = 0
			AT.cityData[i].step = Math.random() * 0.02 + 0.01
		}
	},
	kill(){
		if(AT.Stage){
			AT.Stage.kill()
		}
	},
	calcW: (w)=>{
		return Math.floor(w / AT.Stage.stageWidth * AT.Stage.stageWidth)  
	},
	calcH: (h)=>{
		return Math.floor(h / AT.Stage.stageHeight * AT.Stage.stageHeight)
	},
	addCity({key, name, x = 0, y = 0, radius = AT.defaultRadius, scale = 0.75, location = 'top'}){
		AT[key] = new SUN.MovieClip();
		AT[key].x = AT.calcW(x)
		AT[key].y = AT.calcH(y)
		AT[key].mRadius = radius
		AT[key].lRadius = radius
		AT[key].aAlpha = 0
		AT[key].mAlpha = 0
		AT[key].lAlpha = 0
		AT[key].scaleX = scale
		AT[key].scaleY = scale
		AT[key].draw = function(){
			AT[key].aAlpha += 0.02
			if(AT[key].aAlpha > 1){
				AT[key].aAlpha = 1
			}
			this.beginPath()
			this.globalAlpha = AT[key].aAlpha
			this.fillStyle = AT.defaultColor
			this.arc(0, 0, radius, 0, Math.PI * 2, true)
			this.fill()
			this.font = '30px serif'
			// if(AT[key].scaleX == 0.75 && key == 'sh'){
			// 	this.font = 'bold 45px serif'
			// }
			if(location === 'right'){
				this.fillText(name, 35, 10);
			}else if(location === 'bottom'){
				this.fillText(name, -28, 50);
			}else if(location === 'left'){
				this.fillText(name, -100, 10);
			}else{
				this.fillText(name, -28, -40);
			}


			AT[key].mRadius += 0.8
			AT[key].mAlpha -= 0.015
			if(AT[key].mAlpha < 0){
				AT[key].mRadius = radius
				AT[key].mAlpha = 1
			}
			this.beginPath()
			if(AT[key].aAlpha !== 1){
				this.globalAlpha = AT[key].aAlpha
			}else{
				this.globalAlpha = AT[key].mAlpha
			}
			this.globalAlpha = AT[key].mAlpha
			this.fillStyle = 'rgba(237, 201, 102, 0.6)'
			this.arc(0, 0, AT[key].mRadius, 0, Math.PI * 2, true)
			this.fill()


			AT[key].lRadius += 1.5
			AT[key].lAlpha -= 0.015
			if(AT[key].lAlpha < 0){
				AT[key].lRadius = radius
				AT[key].lAlpha = 1
			}
			this.beginPath()
			this.strokeStyle = AT.defaultColor
			this.strokeWidth = 1
			if(AT[key].aAlpha !== 1){
				this.globalAlpha = AT[key].aAlpha
			}else{
				this.globalAlpha = AT[key].lAlpha
			}
			this.arc(0, 0, AT[key].lRadius, 0, Math.PI * 2, true)
			this.stroke()
			
		}
		AT.Stage.addChild(AT[key])
	},
	addLine(w, h){
		AT['line1'] = new SUN.MovieClip();
		AT['line1'].diffX = AT.calcW(200) - AT.calcW(630)
		AT['line1'].diffY = AT.calcH(680) - AT.calcH(215)
		AT['line1'].posX = 0
		AT['line1'].posY = 0

		AT['line1'].x = AT.calcW(630)
		AT['line1'].y = AT.calcH(215)

		AT['line1'].draw = function(){
			AT['line1'].posX -= 16
			AT['line1'].posY += 17.4
			if(AT['line1'].posX < AT['line1'].diffX){
				AT['line1'].posX = AT['line1'].diffX
			}
			if(AT['line1'].posY > AT['line1'].diffY){
				AT['line1'].posY =AT['line1'].diffY
			}
			this.beginPath()
			this.strokeWidth = 1
			this.moveTo(0, 0)
			this.lineTo(AT['line1'].posX, AT['line1'].posY)
			this.strokeStyle = AT.defaultColor
			this.stroke()
		}

		AT.Stage.addChild(AT['line1'])
	},
	flow(w, h){
		// 上海
		AT.addCity({...AT.cityData[0], scale: 1})

		// 1s后移动
		setTimeout(() => {
			AT.animationFirstCity(AT.Stage.stageWidth, AT.Stage.stageHeight)

			setTimeout(() => {
				AT.addCity({...AT.cityData[1], scale: 1})

				setTimeout(() => {
					AT.scaleCity(w, h)

					setTimeout(() => {
						AT.drawAllLines()
					}, 1000)
				}, 1000)
			}, 1000)
		}, 2000)
	},
	animationFirstCity(w, h){
		AT[AT.cityData[0].key].tween(1, {x: AT.calcW(630), y: AT.calcH(215), ease: "easeOutCubic", callback: function(){
			AT.addLine(w, h)
		}});
	},
	// 杭州上海缩放
	scaleCity(w, h){
		AT[AT.cityData[0].key].tween(1, {x : AT.calcW(605), y: AT.calcH(430), scaleX: 0.75, scaleY: 0.75, ease: "easeOutCubic"})
		AT[AT.cityData[1].key].tween(1, {x : AT.calcW(500), y: AT.calcH(570), scaleX: 0.75, scaleY: 0.75, ease: "easeOutCubic"})

		AT['line1'].tween(1, {x : AT.calcW(600), y: AT.calcH(435), scaleX: 0.20, scaleY: 0.3, rotation: 5,  ease: "easeOutCubic"})
	},
	// 画所有的线
	drawAllLines(){
		AT['lineAll'] = new SUN.MovieClip();
		AT['lineAll'].draw = function(){
			for(let i = 2, len = AT.cityData.length; i < len; i ++){
				AT.cityData[i].pos += AT.cityData[i].step

				if(AT.cityData[i].pos > 1){
					AT.cityData[i].pos = 1
					if(!AT.cityData[i].drawCircle && i < 30){
						AT.cityData[i].drawCircle = true
						AT.addCity(AT.cityData[i])
					}
				}

				
				let {moveX, moveY} = AT.drawTweensLine({
					endY:AT.calcW(AT.cityData[i].y),
					endX: AT.calcW(AT.cityData[i].x),
					pos: AT.cityData[i].pos
				})


				AT.cityData[i].moveY = moveY
				AT.cityData[i].moveX = moveX

				this.beginPath()
				this.strokeWidth = 1
				this.moveTo(AT.centerX, AT.centerY)
				this.lineTo(Math.floor(AT.cityData[i].moveX), Math.floor(AT.cityData[i].moveY))
				this.strokeStyle = AT.defaultColor
				this.globalAlpha = 0.8
				this.stroke()
			}
		}

		AT.Stage.addChild(AT['lineAll'])
	},
	drawTweensLine({startX = AT.centerX, startY = AT.centerY, endX, endY, pos}){
		let process = SUN.tweens.easeInOutCirc(pos)
		let k = (endY - startY) / (endX - startX)
		let flag = k > 0? 1: -1
		let dirX = (endX - startX) < 0?-1: 1
		let dirY = (endY - startY) < 0?-1: 1
		if(dirX === dirY){
			flag = -flag
		}
		return {
			moveX: startX + (startX - endX) * process * flag,
			moveY: startY + k * (endX - (endX - (startX - endX) * process)) * flag
		}
	}
	
}


export default AT